<template>
  <!-- 充电桩拓扑 -->
  <div
    v-if="element.type === EQUIP_TYPE.CHONG_DIAN_ZHUANG"
    class="elementEquip chongDianZhuang"
    :style="{
      backgroundImage: `url(${element.url})`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'contain',
    }"
  >
    <div class="name linkName">{{ element.linkName }}</div>
    <div class="name blockName1">{{ element.blockName1 }}</div>
    <div class="name blockName2">{{ element.blockName2 }}</div>
    <div class="name charge1">{{ element.charge1 }}</div>
    <div class="name charge2">{{ element.charge2 }}</div>

    <div
      class="block block1"
      style="left: 0"
      @click="handleEquip(element, '1')"
    >
      <div class="assertCode cdzAssertCode1">
        <div>资产编码：{{ element?.assertCodeData1?.assetCode || "--" }}</div>
        <div>
          资产编码释义：{{ element?.assertCodeData1?.assetCodeExplain || "--" }}
        </div>
      </div>
    </div>
    <div
      class="block block2"
      style="right: 0"
      @click="handleEquip(element, '2')"
    >
      <div class="assertCode cdzAssertCode2">
        <div>资产编码：{{ element?.assertCodeData2?.assetCode || "--" }}</div>
        <div>
          资产编码释义：{{ element?.assertCodeData2?.assetCodeExplain || "--" }}
        </div>
      </div>
    </div>

    <div
      v-for="(items, index) in detailContentData"
      :key="index"
      :class="['detailContent', `detailContent${index}`]"
    >
      <div
        :class="['detailItem', infoItem.name]"
        v-for="(infoItem, infoIndex) in items"
        :key="infoIndex"
      >
        <div v-if="!filterField.includes(infoItem.name)">
          {{ infoItem.name }}:
          <span v-param="infoItem.pdId"
            >{{ infoItem.value }} {{ infoItem.unit }}</span
          >
        </div>
        <div v-if="infoItem.name === 'linkElectronStatus'">
          状态：{{ ELECTRON_STATUS_LIST[infoItem.value] }}
        </div>
        <div v-if="infoItem.name === 'storageChargeElectronStatus'">
          状态：{{ CHARGING_STATUS_LIST[infoItem.value] }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import {
  EQUIP_TYPE,
  CHARGING_STATUS_LIST,
  ELECTRON_STATUS_LIST,
} from "@/constants/stationConfig";


const emits = defineEmits(["handleEquip"]);
const props = defineProps({
  element: {
    type: Object,
  },
});
const filterField = [
  "linkElectronStatus",
  "storageChargeElectronStatus",
  "blockElectronStatus",
]; // 过滤掉不展示在拓扑图上的字段
const detailContentData = ref({});
const handleEquip = async (element, type) => {
  const newElement = {
    ...element,
    systemId: element[`blockNameId${type}`],
  };
  emits("handleEquip", newElement, type);
};
const initData = () => {
  // 0：电池堆 1：左边电池簇 2：右边电池簇 3：左边充电枪 4：右边充电枪
  detailContentData.value[0] = props.element.linkInfo;
  detailContentData.value[1] = props.element.blockNameInfo1;
  detailContentData.value[2] = props.element.blockNameInfo2;
  detailContentData.value[3] = props.element.chargeInfo1;
  detailContentData.value[4] = props.element.chargeInfo2;
};
onMounted(() => {
  initData();
});
</script>

<style lang="less" scoped>
.block1 {
  &:hover {
    .cdzAssertCode1 {
      display: block;
    }
  }
}
.block2 {
  &:hover {
    .cdzAssertCode2 {
      display: block;
    }
  }
}

.assertCode {
  position: absolute;
  left: 100%; 
  top: 50%; 
  transform: translateY(-50%); 
  margin-left: 10px;
  background-color: rgba(50, 50, 50, 0.9); 
  color: #fff; 
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 
  font-size: 13px; 
  line-height: 1.5; 
  z-index: 100; 
  width: max-content; 
  white-space: nowrap; 
  text-align: left; 
  pointer-events: none; 
  display: none;
}

.assertCode div {
  margin-bottom: 6px;
}

.assertCode div:last-child {
  margin-bottom: 0;
}
.cdzAssertCode1 {
  left: 2px;
  top: -50px;
  display: none;
}
.cdzAssertCode2 {
  left: 2px;
  top: -50px;
  display: none;
}
.detailContent {
  position: absolute;
  width: 100px;
  font-size: 12px;
  .detailItem {
    margin-top: 2px;
    cursor: pointer;
  }
  .P {
    color: #d9001b;
  }
  .Q,
  .V {
    color: #00bfbf;
  }
  .Ia,
  .A {
    color: #ffff00;
  }
  .Ua,
  .SOC {
    color: #f59a23;
  }
  .PF,
  .SOH {
    color: #c280ff;
  }
}
.detailContent0 {
  left: 160px;
  top: -85px;
}
.detailContent1 {
  left: -106px;
  top: 32px;
  text-align: right;
}
.detailContent2 {
  left: 301px;
  top: 32px;
  text-align: left;
}
.detailContent3 {
  left: 60px;
  top: 158px;
  padding-bottom: 30px;
}
.detailContent4 {
  left: 247px;
  top: 158px;
  padding-bottom: 30px;
}
.name {
  position: absolute;
  width: 120px;
}
.linkName {
  left: 20px;
  top: -50px;
  text-align: right;
}
.blockName1 {
  left: -125px;
  top: 10px;
  text-align: right;
}
.blockName2 {
  left: 300px;
  top: 10px;
}
.charge1 {
  left: -65px;
  top: 158px;
  text-align: right;
}
.charge2 {
  left: 120px;
  top: 158px;
  text-align: right;
}
.block {
  position: absolute;
  top: 0;
  width: 110px;
  height: 150px;
}
</style>
